import { Position } from "./interface";
import Background from "./Background";
import Box from "./Box";
import { useImmer } from "use-immer";

interface Shape {
  color: string;
  position: Position;
}

const initialPosition: Position = {
  x: 0,
  y: 0
};

function Canvas() {
  const [shape, updateShape] = useImmer<Shape>({
    color: "orange",
    position: initialPosition
  });

  function handleColorChange(e: React.ChangeEvent<HTMLSelectElement>) {
    updateShape(draft => {
      draft.color = e.target.value;
    });
  }

  function handleMove(dx: number, dy: number) {
    updateShape(draft => {
      draft.position.x += dx;
      draft.position.y += dy;
    });
  }

  return (
    <>
      <select value={shape.color} onChange={handleColorChange}>
        <option value="orange">orange</option>
        <option value="lightpink">lightpink</option>
        <option value="aliceblue">aliceblue</option>
      </select>

      <Background position={initialPosition} />

      <Box color={shape.color} position={shape.position} onMove={handleMove}>
        Drag me
      </Box>
    </>
  );
}

export default Canvas;
